<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/teaWelcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学力管理</el-breadcrumb-item>
      <el-breadcrumb-item>录入权重分数</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="weight" class="demo-form-inline" style="margin-left: -80px;
    margin-top: 10px;" label-width="auto" v-show="isShow">
      <el-form-item label="课程号：">
        <el-input v-model="weight.couId" readonly></el-input>
      </el-form-item>
      <el-form-item label="课程名称：">
        <el-input v-model="weight.couName" readonly></el-input>
      </el-form-item>
      <el-form-item label="课前预习比重：">
        <el-input v-model="weight.previewRate" readonly></el-input>
      </el-form-item>
      <el-form-item label="课堂参与度比重：">
        <el-input v-model="weight.activeRate" readonly></el-input>
      </el-form-item>
      <el-form-item label="课堂测验比重：">
        <el-input v-model="weight.testRate" readonly></el-input>
      </el-form-item>
      <el-form-item label="出勤率比重：">
        <el-input v-model="weight.attendanceRate" readonly></el-input>
      </el-form-item>
      <el-form-item label="作业率比重：">
        <el-input v-model="weight.homeworkRate" readonly></el-input>
      </el-form-item>
      <el-form-item label="学业预警峰值比重：">
        <el-input v-model="weight.predictRate" readonly></el-input>
      </el-form-item>
    </el-form>
<!--  显示课程权重信息  -->
    <el-row :gutter="10">
      <el-col :span="6">
        <el-button type="primary" v-show="!isShow" style="margin-left: -80px;margin-top: 5px;margin-bottom: 20px;" @click="isShow = true">显示权重信息
        </el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="5" style="margin-left: 2px;margin-right: 50px;">
        <el-select v-model="couClass" filterable placeholder="选择班级">
          <el-option label="计科1901班" value="计科1901班"></el-option>
          <el-option label="计科1902班" value="计科1902班"></el-option>
          <el-option label="计科1903班" value="计科1903班"></el-option>
          <el-option label="数媒1901班" value="数媒1901班"></el-option>
          <el-option label="数媒1902班" value="数媒1902班"></el-option>
          <el-option label="软件1901班" value="软件1901班"></el-option>
          <el-option label="软件1902班" value="软件1902班"></el-option>
          <el-option label="电气1901班" value="电气1901班"></el-option>
          <el-option label="电气1902班" value="电气1902班"></el-option>
        </el-select>
      </el-col>
      <el-col :span="1">
        <el-button  type="primary" @click="searchdata">查询</el-button>
      </el-col>
    </el-row>
    <!--表格模块-->
    <el-table :data="students" highlight-current-row
              ref='table'  border stripe height="300" style="margin-top: 30px;" v-if="visible" >
      <el-table-column prop="stuNum" label="学号" fixed align="center" width="120"></el-table-column>
      <el-table-column prop="stuName" label="姓名" align="center"></el-table-column>
      <el-table-column prop="stuSex" label="性别" align="center"></el-table-column>
      <el-table-column prop="stuCard" label="身份证号" align="center" width="180"> </el-table-column>
      <el-table-column prop="stuPhone" label="手机号码" align="center" width="120"> </el-table-column>
      <el-table-column prop="stuAcademy" label="学院" align="center" width="180"></el-table-column>
      <el-table-column prop="stuMajor" label="专业" align="center" width="180"></el-table-column>
      <el-table-column prop="stuClass" label="班级" align="center" width="100"> </el-table-column>
      <el-table-column prop="stuPwd" label="密码" align="center"> </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="100">
        <template slot-scope="scope">
          <el-tag
            type="primary"
            effect="dark"
            @click="openupdate(scope.row)"
          >录入学力分数
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <!--分页插件-->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="curpage"
      :page-sizes="[2, 4, 8, 10]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next"
      :total="total" v-if="visible"
    >
    </el-pagination>
    <!-- 弹出的添加模态框 -->
    <el-dialog title="录入学力分数" :visible.sync="adddialog" @close="clearuseradd">
      <el-form :model="addform"  ref="addform" label-width="auto"
               style="width:85%"
               class="demo-form-inline form">
        <el-form-item prop="couId" label="课程号" >
          <el-input v-model="addform.couId" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="couName" label="课程名称" >
          <el-input v-model="addform.couName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="stuNum"  label="学号">
          <el-input v-model="addform.stuNum" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="week" label="当前周数" >
          <el-select v-model="addform.week"  filterable style="width: 100%;">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
            <el-option label="6" value="6"></el-option>
            <el-option label="7" value="7"></el-option>
            <el-option label="8" value="8"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="previewRate" label="课前预习分数" >
          <el-input v-model="addform.previewRate" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="previewRate" label="课堂参与度分数" >
          <el-input v-model="addform.activeRate" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="previewRate" label="课堂测验分数" >
          <el-input v-model="addform.testRate" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="previewRate" label="出勤率分数" >
          <el-input v-model="addform.attendanceRate" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="previewRate" label="章作业分数" >
          <el-input v-model="addform.homeworkRate" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item  v-show="!isActive">
          <el-button @click="calculateMotive" type="primary">计算学力值</el-button>
        </el-form-item >
        <el-form-item label="该生学力值为" v-show="isActive">
          <el-input v-model="addform.motive" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleInsert">取 消</el-button>
        <el-button type="primary" @click="addPoint">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>

</template>

<script>
  import axios from 'axios';//axios
  import Qs from 'qs';//qs
  export default {
    name:"insertWeightPoint",
    //绑定数据
    data() {
      return {
        isActive:false,
        isShow:true,
        visible:false,
        students:[],
        curpage:1,//当前页
        pagesize:4,//每页显示条数
        total:0,//总条数
        weight:{
          couId:"",
          couName:"",
          previewRate:"",
          activeRate:"",
          testRate:"",
          attendanceRate:"",
          homeworkRate:"",
          predictRate:""
        },
        // 选择录入班级
        couClass:"",
        adddialog:false,//默认时关闭模态框的
        addform:{
          couId:"",
          couName:"",
          stuNum:"",
          week:"",
          previewRate:"",
          activeRate:"",
          testRate:"",
          attendanceRate:"",
          homeworkRate:"",
          motive:""
        },//form表单中的数据绑定
      }
    },
    //文档加载事件,当没有任何按钮去点击触发事件时，可以使用该函数在加载时，触发事件！
    mounted() {
      this.selectOne();
    },
    methods:{
      openupdate(data){
        console.log(data)
        //打开模态框
        this.adddialog=true;
        //数据回显
        this.addform = data;
        this.addform.couId = this.weight.couId;
        this.addform.couName = this.weight.couName;
      },
      selectRow(row) { // 给操作行 高亮
        if (row) {
          this.$refs.table.setCurrentRow(row, true);  // 高亮某一行
        } else {
          this.$refs.table.setCurrentRow();  // 取消高亮
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //添加权重分数
      addPoint() {
        var addInfo = this;
        // 获取到当前代课教师名称
        let teacher = localStorage.getItem("teaName");
        //判断当前校验是否通过
        this.$refs.addform.validate((valid) => {
          if(valid) {
            //发送axios请求
            axios({
              headers:{'Content-Type':'application/x-www-form-urlencoded'},
              method:"post",
              url:"http://localhost:1313/motive/motiveInsert",
              data:Qs.stringify({
                couId:addInfo.addform.couId,
                couName:addInfo.addform.couName,
                stuNum:addInfo.addform.stuNum,
                couTeacher:teacher,
                week:addInfo.addform.week,
                motive:addInfo.addform.motive})
            }).then((res)=>{
              console.log(res)
              if (res.data.code == 200) {
                //1.提示消息，是否录入成功
                this.$message({
                  message: res.data.msg,
                  type:"success",
                });
                //2.关闭模态框
                this.adddialog=false;
                //3.显示计算学力值按钮
                this.isActive = false;
                // this.studentList();
              } else {
                this.$message.error(res.data.msg)
              }
            })
          }
        });
      },
      //关闭添加权重分数的模态框
      clearuseradd() {
        // 重置表单内容
        this.addform.week ="";
        this.addform.previewRate ="";
        this.addform.activeRate ="";
        this.addform.testRate ="";
        this.addform.attendanceRate ="";
        this.addform.homeworkRate ="";
        this.addform.motive ="";
        // 显示计算学力值按钮
        this.isActive = false;
      },
      // 获取课程的权重信息
      selectOne(){
        let couId = localStorage.getItem("couId");
        // 发起GET请求，获取信息
        axios.get(
          "http://localhost:1313/weight/selectWeightByCouId",
          {params:{couId:couId}}
        ).then((res)=>{
          console.log(res);
          if(res.data.code == 200){
            // 将返回的数据赋值给weight表单
            this.weight.couId = res.data.data.couId;
            this.weight.couName = res.data.data.couName;
            this.weight.previewRate = res.data.data.previewRate;
            this.weight.activeRate = res.data.data.activeRate;
            this.weight.testRate = res.data.data.testRate;
            this.weight.attendanceRate = res.data.data.attendanceRate;
            this.weight.homeworkRate = res.data.data.homeworkRate;
            this.weight.predictRate = res.data.data.predictRate;
          }else{
            this.$message.error(res.data.msg)
          }
        })
      },
      // 查询指定班级学生
      searchdata(){
        // 显示表格
        this.visible = true;
        // 隐藏权重信息表格，显示按钮
        this.isShow = false;
        var students=this;
        axios.get(
          "http://localhost:1313/student/queryStudentByStuClassPage",
          {params:{current:students.curpage, rows: students.pagesize,search:students.couClass}}
        ).then((res)=>{
          console.log(res)
          //将返回数据赋值给绑定数据，完成数据渲染
          this.students = res.data.data.students;
          this.total = res.data.data.total;
        });
      },
      // 监听 pageSize 改变的事件
      handleSizeChange (newSize) {
        //   console.log(newSize)
        //  将监听接受到的每页显示多少条的数据 newSzie 赋值给 pagesize
        this.pagesize = newSize;
        //  修改完以后，重新发起请求获取一次数据
        this.searchdata();
      },
      // 监听 页码值  改变的事件
      handleCurrentChange (newPage) {
        //   console.log(newPage)
        //  将监听接受到的页码值的数据 newPage 赋值给 pagenum
        this.curpage = newPage;
        //  修改完以后，重新发起请求获取一次数据
        this.searchdata();
      },
      // 计算学力值
      calculateMotive(){
        // 计算学力值
        // 1.首先获取到课程对应的权重信息，也就是weight表单数据
        let previewRate = this.weight.previewRate;
        let activeRate = this.weight.activeRate;
        let testRate = this.weight.testRate;
        let attendanceRate = this.weight.attendanceRate;
        let homeworkRate = this.weight.homeworkRate;
        // 2.获取到addform表单输入的分数
        let preview = this.addform.previewRate;
        let active = this.addform.activeRate;
        let test = this.addform.testRate;
        let attendance = this.addform.attendanceRate;
        let homework = this.addform.homeworkRate;
        // 3.进行相乘累加计算
        let value = previewRate * preview + activeRate * active + testRate * test + attendanceRate * attendance +
          homeworkRate * homework;
        let motive = parseFloat(value).toFixed(2);
        console.log(motive);
        // 显示学力值
        this.isActive = true;
        this.addform.motive = motive;
      },
      // 取消录入学力分数
      cancleInsert(){
        // 关闭添加对话框
        this.adddialog = false;
        // 重置表单内容
        this.addform.previewRate = "";
        this.addform.activeRate = "";
        this.addform.testRate = "";
        this.addform.attendanceRate = "";
        this.addform.homeworkRate = "";
        this.addform.motive = "";
      },
    },
  }

</script>

<style>
  /* 用来设置当前页面element全局table 选中某行时的背景色*/
  .el-table__body tr.current-row>td{
    background-color: rgba(227, 189, 241, 0.76) !important;
    color: #fff;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 15px;
  }
  .form{
    display: grid;
    justify-content: center;
    /* align-items: center; */
    justify-items: center;
  }

  .el-button--info.is-plain {
    color: #704141;
    background: #f4f4f5;
    border-color: #d3d4d6;
  }
  .el-button--mini {
    font-size: 14px;
    border-radius: 3px;
  }
  .el-breadcrumb{
    padding-bottom: 20px;
  }
  .el-pagination{
    padding-top: 20px;
  }
</style>
